如前文所述,NextUI 提供了两个预定义的主题,light 和 dark。这些主题本质上是灵活的,允许您根据您的特定偏好或项目需求进行定制。
此外,您还可以根据默认主题创建自己的主题。每个主题都包含 布局 令牌和 颜色 令牌,旨在简化您的定制过程。
自定义布局您可以修改各种布局方面,包括间距单位、字体大小、行高、半径等。
布局令牌可以全局应用于所有主题,也可以专门应用于所选主题。
全局布局自定义假设您需要在所有主题中使用更小的边框半径、更细的边框宽度以及更不透明的禁用元素。您可以通过将以下代码添加到 tailwind.config.js 文件中来实现这些更改。
// tailwind.config.jsconst {nextui} = require("@nextui-org/react");/** @type {import('tailwindcss').Config} */module.exports = { plugins: [nextui({ layout: {disabledOpacity: "0.3", // opacity-[0.3]radius: { small: "2px", // rounded-small medium: "4px", // rounded-medium large: "6px", // rounded-large},borderWidth: { small: "1px", // border-small medium: "1px", // border-medium large: "2px", // border-large}, }, themes: {light: {},dark: {}, },}), ],};由于 NextUI 组件采用了布局令牌,因此修改将反映在所有使用它们的组件中。例如,按钮 组件使用 radius 令牌来设置边框半径,并使用 borderWidth 令牌来定义变体为 bordered 时的边框宽度。
让我们看看 按钮 组件在更改之后的样子。
import {Button} from "@nextui-org/react";export default function App() { return ( ButtonDisabled);}请参阅 布局 部分,以了解有关可用令牌的